<template>
	<view class="index-content" v-if="loadEnd">
		<!-- 头部 -->
		<view class="header-cont">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="item in swiperList" :key="item.id">
					<!-- <image src="/static/forum/banner.png" mode="aspectFit"></image> -->
					<image :src="item.image" mode="aspectFill"></image>
					<!-- <image :src="adminImgPath + '/' + item.image" mode="aspectFill"></image> -->
				</swiper-item>
			</swiper>
		</view>

		<!-- 导航栏 -->
		<view class="nav-cont">
			<view class="nav-data" v-for="item in nav_Data" :key="item.id">
				<view class="data-title" :class="{ active: newIndex == item.id }" @click="changeTitle(item.id)">{{ item.title }}</view>
			</view>
		</view>

		<!-- 主题内容 -->
		<view class="main-cont">
			<mainList :show-data="postsList" @likePosts="likePosts"></mainList>
			<view class="" style="margin: 10rpx 0;color: #656565;font-size: 26rpx;text-align: center;" v-if="postsList.length != 0 && !hasMore">没有更多了~</view>
		</view>

		<!-- 返回主页 -->
		<view class="gohome" @click="goHome()"><image src="/static/login/tohome.png" mode="aspectFit"></image></view>

		<!-- 缺省 -->
		<view class="default-height" style="width: 100%;height: 92rpx;"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue'
import mainList from '@/pages/Component/forum/component/main-list/mainList.vue'
import ikz from '@/pages/Common/tools.js'
var app = getApp()
export default {
	components: {
		ikzTabbar,
		mainList,
	},
	data() {
		return {
			loadEnd:false,
			adminImgPath: app.globalData.adminImgPath,
			newIndex: 1,
			nav_Data: [
				{
					id: 1,
					title: '最新',
				},
				{
					id: 2,
					title: '推荐',
				},
			],
			tabbar_Data: {
				type: 0,
				list: [
					{
						title: '首页',
						url: '/pages/Component/forum/Program/index/index',
						iconPath: '/static/forum/tabbar/index.png',
						selectedIconPath: '/static/forum/tabbar/index-check.png',
						status: 1,
					},
					{
						title: '频道',
						url: '/pages/Component/forum/Program/circle/circle',
						iconPath: '/static/forum/tabbar/circle.png',
						selectedIconPath: '/static/forum/tabbar/circle-check.png',
						status: 1,
					},
					{
						title: '发布',
						url: '/pages/Component/forum/Program/release/release',
						iconPath: '/static/forum/tabbar/release.png',
						selectedIconPath: '/static/forum/tabbar/release-check.png',
						status: 1,
					},
					{
						title: '我的',
						url: '/pages/Component/forum/Program/personal/personal',
						iconPath: '/static/forum/tabbar/mine.png',
						selectedIconPath: '/static/forum/tabbar/mine-check.png',
						status: 1,
					},
				],
			},
			swiperList: [], //轮播图列表
			postsList: [], //帖子列表

			page: 1,
			limit: 10,
			hasMore: false,
		}
	},
	onLoad() {
		this.loadEnd = false
		this.getSwiper()
		this.getPostsList()
	},
	onShow(){
		this.getPostsList()
	},
	onPullDownRefresh() {
		this.page = 1
		this.getPostsList()
	},
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getPostsList()
		}
	},
	methods: {
		// 切换分类
		changeTitle(id) {
			this.newIndex = id
			uni.showLoading({
				mask: true,
			})
			this.page = 1
			this.getPostsList()
		},
		// 返回主页
		goHome() {
			uni.switchTab({
				url: '/pages/Home/index',
			})
		},
		// 获取轮播图
		getSwiper() {
			let path = '/xyb/posts/posts_carousel/index'
			let data = {}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					// console.log(res.data.data);
					this.swiperList = res.data.data.carousel_list
				}
			})
		},

		// 获取最新或推荐帖子
		getPostsList() {
			let path = '/xyb/posts/posts/index'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				recommend: this.newIndex - 1,
				page: this.page,
				limit: this.limit,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					console.log('获取最新或推荐帖子', res.data)
					let postsList = []
					postsList = res.data.data.data
					postsList.forEach(el => {
						if (el.images.length != 0) {
							el.imagesNum = el.images.length
							if (el.images.length > 3) {
								el.images.slice(0, 3)
							}
						}
					})
					this.postsList = this.page == 1 ? postsList : [...this.postsList, ...postsList]
					this.hasMore = this.page < res.data.data.count / this.limit ? true : false
				}
				this.loadEnd = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		// 点赞或取消点赞帖子
		likePosts(id, status) {
			let path = ''
			if (status == 0) {
				path = '/xyb/posts/posts/give'
			} else {
				path = '/xyb/posts/posts/give_del'
			}
			let data = {
				token: uni.getStorageSync('local_user_session'),
				posts_id: id,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					// console.log(res.data.data);
					this.postsList.forEach(el => {
						if (el.id == id) {
							if (el.give_status == 0) {
								el.give_status = 1
								el.give++
							} else {
								el.give_status = 0
								el.give--
							}
						}
					})
					let title = ''
					if (status == 0) {
						title = '点赞成功'
					} else {
						title = '取消点赞'
					}
					uni.showToast({
						title,
						icon: 'none',
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
page {
}

.index-content {
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: 26rpx 26rpx 106rpx 26rpx;
	background-color: #f8f8f8;

	.header-cont {
		width: 100%;
		height: 200rpx;

		swiper {
			width: 100%;
			height: 100%;
			background-color: #fff;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 5px;
		}
	}

	.nav-cont {
		width: 100%;
		padding: 25rpx;
		display: flex;
		align-items: flex-end;

		.nav-data {
			margin-right: 25rpx;

			.data-title {
				font-size: 30rpx;
				color: #555555;

				&.active {
					font-size: 34rpx;
					color: #000000;
					font-weight: 600;
				}
			}
		}
	}

	.gohome {
		position: fixed;
		top: 70%;
		right: 36rpx;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
}
</style>
